<template>
  <div class="order">
    <div class="box6">
      <h2><i class="el-icon-s-order"></i>我的订单</h2>
    </div>
    <div class="box7">
      <div v-for="(item, index) in OrderList" :key="index">
        <div class="topBox">
          <span>订单编号:{{ item[index].order_id }}</span
          ><span>订单时间:2021-04-20 14:36:29</span>
        </div>
        <el-table :data="item" style="width: 100%">
          <el-table-column label="" width="180">
            <template slot-scope="scope">
              <img :src="'api' + scope.row.product_picture" alt="" />
            </template>
          </el-table-column>
          <el-table-column prop="product_name" label="商品名称" width="180">
          </el-table-column>
          <el-table-column label="单价">
            <template slot-scope="scope">
              <span>{{ scope.row.product_price }}元</span>
            </template>
          </el-table-column>
          <el-table-column prop="product_num" label="数量"> </el-table-column>
          、<el-table-column label="小计">
            <template slot-scope="scope">
              <span class="subtotal"
                >{{ scope.row.product_price * scope.row.product_num }}元</span
              >
            </template>
          </el-table-column>
        </el-table>
        <div class="bomBox">
          <p>共<span class='sum'>{{item[index].product_num}}</span>件商品</p>
          <p>合计:<span class="total">{{item[index].product_num*item[index].product_price}}元</span></p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Order from "../miAPI/Order";
export default {
  data() {
    return {
      OrderList: [
        [
          {
            id: 3864,
            order_id: 1261618840811746,
            user_id: 126,
            product_id: 2,
            product_num: 2,
            product_price: 2599,
            order_time: 1618840811746,
            product_name: "Redmi K30 5G",
            product_picture: "public/imgs/phone/Redmi-k30-5G.png",
          },
        ],
      ],
    };
  },
  mounted() {
    // this.getOrder()
  },
  methods: {
    async getOrder() {
      let { data: res } = await Order.getOrder({
        user_id: this.$store.state.user.user_id,
      });
      console.log(res);
    },
  },
  computed:{
  }
};
</script>

<style lang='scss'>
.order {
  width: 100%;
  .box6 {
    width: 100%;
    display: flex;
    padding: 40px 8% 20px;
    border-bottom: 3px solid orange;
    h2 {
      font-size: 30px;
      margin-right: 30px;
    }
    i {
      color: orange;
      font-weight: bold;
    }
  }
  .box7 {
    width: 100%;
    padding: 30px 8%;
    background: #f5f5f5;
    .topBox {
      background: #fff;
      width: 100%;
      border-bottom: 2px solid orange;
      height: 60px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 20px;
    }
    .bomBox {
      width: 100%;
      height: 60px;
      background: #fff;
      border-top: 2px solid orange;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 20px;
      .total{
        color: orange;
        font-size: 30px;
      }
      .sum{
        color: orange;
        font-size: 20px;
      }
    }
    img {
      width: 80px;
      height: 80px;
    }
    .el-table__row:hover > td {
      background-color: #fff !important;
    }
    .el-table__row--striped:hover > td {
      background-color: #fff !important;
    }
    .subtotal {
      font-size: 20px;
      color: orange;
    }
  }
}
</style>